<!DOCTYPE html>
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8" />
    <title>
      Vis Network | Example Applications | Neighbourhood Highlighting
    </title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script src="../datasources/WorldCup2014.js"></script>

    <style type="text/css">
      #mynetwork {
        width: 800px;
        height: 800px;
        border: 1px solid lightgray;
      }
    </style>
  </head>

  <body>
    <h2>Dynamic Data - Neighbourhood Highlight</h2>
    <div style="width: 800px; font-size: 14px">
      This example shows the power of the DataSet. Once a node is clicked, all
      nodes are greyed out except for the first and second order connected
      nodes. In this example we show how you can determine the order of
      connection per node as well as applying individual styling to the nodes
      based on whether or not they are connected to the selected node. The code
      doing the highlighting only takes about 1ms, the rest of the time is the
      redrawing of the network (9200 edges..).
      <br /><br />
    </div>

    <div id="mynetwork"></div>

    <script type="text/javascript">
      var network;
      var allNodes;
      var highlightActive = false;

      var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
      var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js

      function redrawAll() {
        var container = document.getElementById("mynetwork");
        var options = {
          nodes: {
            shape: "dot",
            scaling: {
              min: 10,
              max: 30,
              label: {
                min: 8,
                max: 30,
                drawThreshold: 12,
                maxVisible: 20,
              },
            },
            font: {
              size: 12,
              face: "Tahoma",
            },
          },
          edges: {
            width: 0.15,
            color: { inherit: "from" },
            smooth: {
              type: "continuous",
            },
          },
          physics: false,
          interaction: {
            tooltipDelay: 200,
            hideEdgesOnDrag: true,
            hideEdgesOnZoom: true,
          },
        };
        var data = { nodes: nodesDataset, edges: edgesDataset }; // Note: data is coming from ./datasources/WorldCup2014.js

        network = new vis.Network(container, data, options);

        // get a JSON object
        allNodes = nodesDataset.get({ returnType: "Object" });

        network.on("click", neighbourhoodHighlight);
      }

      function neighbourhoodHighlight(params) {
        // if something is selected:
        if (params.nodes.length > 0) {
          highlightActive = true;
          var i, j;
          var selectedNode = params.nodes[0];
          var degrees = 2;

          // mark all nodes as hard to read.
          for (var nodeId in allNodes) {
            allNodes[nodeId].color = "rgba(200,200,200,0.5)";
            if (allNodes[nodeId].hiddenLabel === undefined) {
              allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
              allNodes[nodeId].label = undefined;
            }
          }
          var connectedNodes = network.getConnectedNodes(selectedNode);
          var allConnectedNodes = [];

          // get the second degree nodes
          for (i = 1; i < degrees; i++) {
            for (j = 0; j < connectedNodes.length; j++) {
              allConnectedNodes = allConnectedNodes.concat(
                network.getConnectedNodes(connectedNodes[j])
              );
            }
          }

          // all second degree nodes get a different color and their label back
          for (i = 0; i < allConnectedNodes.length; i++) {
            allNodes[allConnectedNodes[i]].color = "rgba(150,150,150,0.75)";
            if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
              allNodes[allConnectedNodes[i]].label =
                allNodes[allConnectedNodes[i]].hiddenLabel;
              allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
            }
          }

          // all first degree nodes get their own color and their label back
          for (i = 0; i < connectedNodes.length; i++) {
            allNodes[connectedNodes[i]].color = undefined;
            if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
              allNodes[connectedNodes[i]].label =
                allNodes[connectedNodes[i]].hiddenLabel;
              allNodes[connectedNodes[i]].hiddenLabel = undefined;
            }
          }

          // the main node gets its own color and its label back.
          allNodes[selectedNode].color = undefined;
          if (allNodes[selectedNode].hiddenLabel !== undefined) {
            allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
            allNodes[selectedNode].hiddenLabel = undefined;
          }
        } else if (highlightActive === true) {
          // reset all nodes
          for (var nodeId in allNodes) {
            allNodes[nodeId].color = undefined;
            if (allNodes[nodeId].hiddenLabel !== undefined) {
              allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
              allNodes[nodeId].hiddenLabel = undefined;
            }
          }
          highlightActive = false;
        }

        // transform the object into an array
        var updateArray = [];
        for (nodeId in allNodes) {
          if (allNodes.hasOwnProperty(nodeId)) {
            updateArray.push(allNodes[nodeId]);
          }
        }
        nodesDataset.update(updateArray);
      }

      redrawAll();
    </script>
  </body>
</html>
